<template>
  <view class="my-order" style="padding-bottom: 100rpx">
    <view class="list" style="padding-bottom: 50rpx">
      <view
        class="item"
        v-for="(item, index) in orderInfo.merchantOrderList"
        :key="index"
      >
        <view
          class="title"
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <view
            class="acea-row row-middle"
            style="display: flex; align-items: center"
          >
            <view>
              <text class="mr10"
                ><span class="f-s-30 f-w-500" style="font-size: 24rpx"> </span>
                {{ orderInfo.orderNo }}</text
              >
            </view>
          </view>
          <view v-if="orderInfo.refundStatus == 3" class="font_color"
            >已退款</view
          >
          <template v-else>
            <view
              v-if="orderInfo.payType == 'offline'"
              style="font-size: 24rpx"
            >
              <view class="font_color"
                >{{ orderInfo.status | orderStatusFilter }}（货到付款）</view
              >
            </view>
            <view class="font_color" v-else>{{
              orderInfo.status | orderStatusFilter
            }}</view>
          </template>
        </view>
        <view v-for="(items, indexs) in item.orderInfoList" :key="indexs">
          <view class="item-info acea-row row-between row-top">
            <view class="pictrue">
              <easy-loadimage
                mode="widthFix"
                :image-src="items.image"
              ></easy-loadimage>
            </view>
            <view class="text acea-row row-between">
              <view class="nameBox">
                <view class="name line2">
                  <span
                    v-if="Number(item.type) > 0 && Number(item.type) < 3"
                    class="activity bg_color"
                    >{{ item.type | orderTypeFilter }}</span
                  >
                  <span
                    v-if="Number(item.secondType) === 1"
                    class="activity bg_color"
                    >积分</span
                  >
                  <span>{{ items.productName }}</span>
                </view>
                <view class="sku line1">{{ items.sku }}</view>
              </view>
              <view class="money">
                <view>￥{{ items.price }}</view>
                <view>x{{ items.payNum }}</view>
              </view>
            </view>
          </view>
          <view
            v-if="items.applyRefundNum && item.refundStatus > -1"
            class="text-24rpx font-color oppoSans-R mr-20px px-30 mt-14"
          >
            售后申请数量：{{ items.applyRefundNum }}
          </view>
        </view>
        <view class="totalPrice"
          >{{ orderInfo.totalNum }}
          件商品， 总金额
          <text class="money"> ￥{{ orderInfo.totalPrice }}</text>
        </view>
        <view class="address" v-if="[10, 11, 12, 0].includes(item.status)">
          <view class="address_top">
            配送地址:
            <text class="money" style="margin-left: 30rpx">
              {{ item.consigneeDetailedAddress }}
            </text>
            <view
              class="toAddress"
              @tap="
                gomapApp(
                  item.consigneeLatitude,
                  item.consigneeLongitude,
                  item.consigneeDetailedAddress
                )
              "
            >
              <image
                src="@/static/navigation.png"
                style="width: 26rpx; height: 26rpx; margin-left: 30rpx"
              ></image
              ><span style="color: #1296db">导航</span>
            </view>
          </view>
          <view class="address_bottom">
            联系方式:
            <text class="money" style="margin-left: 30rpx">
              {{ item.consigneeName }}
            </text>
            <span
              style="margin: 0 16rpx; color: #1296db"
              @tap="makePhone(item.consigneePhone)"
            >
              {{ item.consigneePhone }}
            </span>
          </view>
        </view>
        <view class="bottom acea-row row-right row-middle">
          <view class="item acea-row row-between" style="padding: 10rpx 24rpx">
            <text>买家留言:</text>
            <text :style="{ color: item.userRemark ? '#e93323' : '#ccc' }">{{
              item.userRemark || "-"
            }}</text>
          </view>
        </view>
        <view class="bottom acea-row row-right row-middle">
          <view
            class="bnt cancelBnt"
            @tap.stop="makePhone(orderInfo.consigneePhone)"
          >
            联系客户
          </view>
          <view
            class="bnt cancelBnt"
            v-if="
              ['12', 12].includes(orderInfo.status) &&
              $store.state.app.userInfo.loginType == 2
            "
            @tap.stop="makePhone(orderInfo.deliveryPersonnelPhone)"
          >
            联系骑手
          </view>
          <view
            class="bnt qrCode"
            v-if="
              ['10', 10].includes(orderInfo.status) &&
              $store.state.app.userInfo.loginType == 2
            "
            @tap.stop="markCode(orderInfo.orderNo)"
          >
            配送码
          </view>
          <view
            class="bnt cancelBnt"
            v-if="
              ['11', 11].includes(orderInfo.status) &&
              $store.state.app.userInfo.loginType == 1
            "
            @tap.stop="hasServed(orderInfo.orderNo)"
          >
            已送达
          </view>
          <view
            class="bnt cancelBnt"
            style="background: #ff557f; color: azure"
            v-if="['3', 3].includes(orderInfo.status) && orderType == 1"
            @tap="setWriteOff"
          >
            确认核销
          </view>
          <!-- 订单调整 -->
          <view
            class="bnt cancelBnt"
            v-if="
              ['12', 12].includes(orderInfo.status) &&
              $store.state.app.userInfo.loginType == 1 &&
              orderInfo.isAdjustOrder == 0
            "
            @tap.stop="adjustmentOrder(orderInfo.orderNo)"
          >
            订单调整
          </view>
          <!-- 收款码 -->
          <view
            class="bnt qrCode"
            v-if="
              orderInfo.isCollectOnDelivery == '1' &&
              !orderInfo.paid &&
              $store.state.app.userInfo.loginType == 1 &&
              ['12', 12,0,'0'].includes(orderInfo.status)
            "
            @tap.stop="makeQrCode(orderInfo.orderNo)"
          >
            收款码
          </view>
          <!-- 配送异常 -->
          <view
            class="bnt cancelBnt"
            v-if="
              ['12', 12].includes(orderInfo.status) &&
              $store.state.app.userInfo.loginType == 1
            "
            @tap="handleException"
          >
            配送异常
          </view>
          <view v-if="[10,14].includes(orderInfo.status) && $store.state.app.userInfo.loginType == 2" class="bnt cancelBnt" @tap.stop="adjustmentDeliveryTime(orderInfo)">
            调整配送时间
          </view>
          <view
            class="bnt cancelBnt"
            @tap.stop="goOutbound(orderInfo.orderNo, 1)"
            v-if="
              [14].includes(orderInfo.status) &&
              $store.state.app.userInfo.loginType == 2
            "
          >
            备货出库
          </view>

          <view
            class="bnt cancelBnt"
            @tap.stop="goOutbound(orderInfo.orderNo, 0)"
            v-if="
              orderInfo.isStockUp == 1 &&
              $store.state.app.userInfo.loginType == 2
            "
          >
            备货出库单
          </view>
          <view
            class="bnt qrCode"
            v-if="
              orderInfo.inOrOutWarehouseSkuDetailsList &&
              orderInfo.inOrOutWarehouseSkuDetailsList.length > 0
            "
            @tap.stop="goReturnDetails(orderInfo)"
          >
            退货商品
          </view>
        </view>
      </view>
    </view>

    <view class="list2" style="margin-bottom: 50rpx">
      <view class="item" style="padding: 10rpx 24rpx">
        <text class="mr10"><span class="f-s-36 f-w-500">订单信息 </span></text>
      </view>
      <view class="item acea-row row-between" style="padding: 10rpx 24rpx">
        <text>下单时间</text>
        <text>{{ orderInfo.createTime || 0 }}</text>
      </view>
      <view class="item acea-row row-between" style="padding: 10rpx 24rpx">
        <text>配送时间</text>
        <text style="color: red" 
          >{{ orderInfo.extendDeliveryTimeStr }}</text
        >
      </view>
      <view class="item acea-row row-between" style="padding: 10rpx 24rpx" v-if="orderInfo.extendDeliveryMinute!=0">
        <text>延长时间</text>
        <text style="color: red" 
          >{{ orderInfo.extendDeliveryMinute }}分钟</text
        >
      </view>

      <view class="item acea-row row-between" style="padding: 10rpx 24rpx">
        <text>支付状态</text>
        <view class="conter" v-if="orderInfo.paid">已支付</view>
        <view class="conter" v-else style="color: #e93323">未支付</view>
      </view>
      <view class="item acea-row row-between" style="padding: 10rpx 24rpx">
        <text>支付方式</text>
        <view class="conter">{{ orderInfo.payType | payTypeFilter }}</view>
      </view>
      <view class="item acea-row row-between" style="padding: 10rpx 24rpx">
        <text>收货人</text>
        <text>{{ orderInfo.consigneeName }}</text>
      </view>

      <view class="item acea-row row-between" style="padding: 10rpx 24rpx">
        <text>收货电话</text>
        <text>{{ orderInfo.consigneePhone }}</text>
      </view>
      <view class="item acea-row row-between" style="padding: 10rpx 24rpx">
        <text>收货地址</text>
        <text>{{ orderInfo.consigneeDetailedAddress }}</text>
      </view>
    </view>

    <view class="list2">
      <view class="item" style="padding: 10rpx 24rpx">
        <text class="mr10"><span class="f-s-36 f-w-500">订单费用 </span></text>
      </view>
      <view class="item acea-row row-between" style="padding: 10rpx 24rpx">
        <text>实付款(含运费)</text>
        <text>{{ orderInfo.payPrice }}</text>
      </view>
      <view class="item acea-row row-between" style="padding: 10rpx 24rpx">
        <text>平台优惠</text>
        <text>{{ orderInfo.platCouponPrice }}</text>
      </view>
      <view class="item acea-row row-between" style="padding: 10rpx 24rpx">
        <text>运费优惠</text>
        <text>{{ orderInfo.merCouponPrice }}</text>
      </view>
      <view class="item acea-row row-between" style="padding: 10rpx 24rpx">
        <text>运费</text>
        <text>{{ orderInfo.payPostage }}</text>
      </view>
      <view
        class="item acea-row row-between"
        style="padding: 10rpx 24rpx"
        v-if="orderInfo.isAdjustOrder === 1 && orderInfo.status === 0"
      >
        <text>待付款</text>
        <text class="money" v-if="orderInfo.isCollectOnDelivery == 0">
          {{ orderInfo.differencePrice }}</text
        >
        <text class="money" v-else> {{ orderInfo.totalPrice }}</text>
      </view>
      <view class="item acea-row row-between" style="padding: 10rpx 24rpx">
        <text>总金额</text>
        <text class="money">{{ orderInfo.totalPrice }}</text>
      </view>
    </view>
    <view class="list2" style="margin-top: 50rpx">
      <!-- 配送员信息 -->
      <view class="item" style="padding: 10rpx 24rpx">
        <text class="mr10"
          ><span class="f-s-36 f-w-500">配送员信息 </span></text
        >
      </view>
      <view class="item acea-row row-between" style="padding: 10rpx 24rpx">
        <text>配送员</text>
        <text>{{ orderInfo.deliveryPersonnelName }}</text>
      </view>
      <view class="item acea-row row-between" style="padding: 10rpx 24rpx">
        <text>配送员电话</text>
        <text>{{ orderInfo.deliveryPersonnelPhone }}</text>
      </view>
    </view>
    <view class="list2" v-if="orderInfo.cancelReason" style="margin-top: 50rpx">
      <view class="item" style="padding: 10rpx 24rpx">
        <text class="mr10"><span class="f-s-36 f-w-500">关闭原因 </span></text>
      </view>
      <view class="item acea-row row-between" style="padding: 10rpx 24rpx">
        <text v-if="orderInfo.cancelOrderUserType == 1">取消原因</text>
        <text v-else-if="orderInfo.cancelOrderUserType == 2">异常配送</text>
        <text>{{ orderInfo.cancelReason }}</text>
      </view>
    </view>
    <uni-popup
      ref="popup"
      type="center"
      background-color="#fff"
      border-radius="10px 10px 0 0"
    >
      <img :src="codeImg" />
    </uni-popup>
    <refuse-reason-dialog
      :show="refuseDialog"
      :reasons="reasons"
      @submit="handleRefuseSubmit"
      @close="handleRefuseClose"
    ></refuse-reason-dialog>
  </view>
</template>

<script>
import RefuseReasonDialog from "@/components/RefuseReasonDialog.vue";
import easyLoadimage from "@/components/base/easy-loadimage.vue";
import {
  getOrderDetail,
  verification,
  strToBase64Api,
  refusedOrder,
  personnelDelivered,
  extendDeliveryTime
} from "@/api/index.js";
export default {
  components: {
    easyLoadimage,
    RefuseReasonDialog,
  },

  data() {
    return {
      refuseDialog: false,
      reasons: [
        "客户联系不上（等待20分钟）",
        "客户临时有事,无法收货",
        "客户地址错误",
      ],
      orderData: {},
      orderDetails: [],
      orderNo: "",
      id: 0, //订单id
      secondType: 0, //订单二级类型:0-普通订单，1-积分订单，2-虚拟订单，4-视频号订单，5-云盘订单，6-卡密订单
      orderExtend: [], //系统表单数据
      shippingType: null,
      orderInfo: {},
      orderType: -1,
      verifyCode: "",
      codeImg: null,
    };
  },

  filters: {
    orderStatusFilter(status) {
      const statusMap = {
        0: "待付款",
        1: "待发货",
        2: "部分发货",
        3: "待自提",
        4: "待收货",
        5: "已收货",
        6: "已完成",
        9: "已取消",
        10: "待配送",
        11: "配送中",
        12: "已送达，待签收",
        14: "待备货",
      };
      return statusMap[status];
    },
    payTypeFilter(status) {
      const statusMap = {
        weixin: "微信",
        alipay: "支付宝",
        yue: "余额",
        offline: "线下",
        give: "平台赠送",
      };
      return statusMap[status];
    },
  },
  methods: {
    adjustmentDeliveryTime(orderInfo){
      uni.showModal({
        title: '调整配送时间',
        content: '调整的送时间需联系客户沟通',
        confirmText: '联系客户',
        cancelText: '已联系',
        confirmColor: '#1296db',
        cancelColor: '#1296db',
        success: (res) => {
          if(res.confirm){
            this.makePhone(orderInfo.consigneePhone);
          }else{
            this.showTimeOptions(orderInfo);
          }
        },
      });
    },
    showTimeOptions(orderInfo){ 
      uni.showActionSheet({
        itemList: ['延长30分钟', '延长60分钟', '延长90分钟', '延长120分钟'],
        success: (res) => {
          const timeOptions = [30, 60, 90, 120];
          const selectedTime = timeOptions[res.tapIndex];
          this.extendDeliveryTime(orderInfo, selectedTime);
        },
      });
    },
    extendDeliveryTime(orderInfo, selectedTime){
      extendDeliveryTime({
        orderNo: orderInfo.orderNo,
        extendDeliveryMinute: selectedTime,
      }).then(res => {
        if(res.code == 200){
          this.getOrderInfo();
          uni.showToast({
            title: `已延长配送时间${selectedTime}分钟`,
            icon: 'success'
          });
        }
      });
    },
     makeQrCode(id) {
      uni.showActionSheet({
        itemList: ["支付宝", "微信"],
        success: (res) => {
          console.log(res);
          if (res.tapIndex == 0) {
            uni.navigateTo({
              url:
                "/pages/orderManage/qrcode?orderNo=" + id + "&payType=alipay",
            });
          } else if (res.tapIndex == 1) {
            uni.navigateTo({
              url:
                "/pages/orderManage/qrcode?orderNo=" + id + "&payType=weixin",
            });
          }
        },
      });
    },
    goReturnDetails(item) {
      if (this.$store.state.app.userInfo.loginType == 1) {
        uni.navigateTo({
          url:
            "/pages/outBound/index?returnList=" +
              encodeURIComponent(
                JSON.stringify(item.inOrOutWarehouseSkuDetailsList)
              ) +
              "&inOrOutWarehouseStatus=" +
              item.inOrOutWarehouseStatus || 0,
        });
      } else {
        uni.navigateTo({
          url: `/pages/orderIn/detail?id=${item.id}&inOrOutWarehouseType=2`, //1:出 2:入
        });
      }
    },
    goOutbound(orderNo, type) {
      uni.navigateTo({
        url: "/pages/outBound/outBound?orderNo=" + orderNo + "&isAdd=" + type,
      });
    },
    adjustmentOrder(code) {
      uni.navigateTo({
        url: "/pages/orderChange/index?orderNo=" + code,
      });
    },
    hasServed(code) {
      let that = this;
      uni.showModal({
        title: "送达",
        content: "确认商品已送达吗？",
        success: function (res) {
          if (res.confirm) {
            personnelDelivered(code).then((ress) => {
              if (ress.data) {
                uni.showToast({
                  icon: "none",
                  title: "已送达",
                });
              }

              that.getOrderInfo();
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    makePhone(phone) {
      uni.makePhoneCall({
        phoneNumber: phone,
      });
    },
    /**
     *
     * 生成二维码
     */
    markCode(text) {
      strToBase64Api({
        height: "250",
        text: text,
        width: "250",
      }).then((res) => {
        this.codeImg = res.data.code;
        this.$refs.popup.open();
      });
    },
    handleException() {
      this.refuseDialog = true;
    },
    handleRefuseSubmit(reason) {
      console.log(reason, 286);
      refusedOrder({
        orderNo: this.orderInfo.orderNo,
        cancelReason: reason,
        cancelOrderUserType: 2,
      })
        .then((res) => {
          console.log(res, 288);
          uni.showToast({
            title: "操作成功",
            icon: "success",
          });
          this.getOrderInfo();
        })
        .catch((err) => {
          console.log(err, 290);
          this.getOrderInfo();
        });
      this.refuseDialog = false;
    },
    handleRefuseClose() {
      this.refuseDialog = false;
    },
    setWriteOff() {
      let that = this;
      uni.showModal({
        title: "确认核销",
        content: "确定核销此订单吗",
        success: function (res) {
          if (res.confirm) {
            // console.log('用户点击确定');
            verification({
              verifyCode: that.verifyCode,
            })
              .then((res) => {
                // console.log(res);
                if (res.data) {
                  uni.showToast({
                    icon: "success",
                    title: "核销成功",
                  });
                  // console.log(this.verifyCode, 298);
                  that.getOrderInfo();
                }
              })
              .catch((e) => {
                console.log(e, 257, that.verifyCode);
              });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    /**
     * 获取订单详细信息
     *
     */
    getOrderInfo: function () {
      let that = this;
      uni.showLoading({
        title: "正在加载中",
      });
      getOrderDetail(that.orderNo)
        .then((res) => {
          uni.hideLoading();
          let data = res.data;
          that.$set(that, "orderInfo", data);
          that.$set(that, "id", data.id);
          that.$set(that, "secondType", data.secondType);
          that.$set(
            that,
            "orderExtend",
            data.orderExtend ? JSON.parse(data.orderExtend) : []
          );
          that.$set(
            that,
            "shippingType",
            data.merchantOrderList[0].shippingType
          );
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  onLoad: function (options) {
    if (!options.orderNo)
      return uni.showToast({
        title: "缺少参数",
        icon: "none",
      });
    this.$set(this, "orderNo", options.orderNo);
    if (options.orderType) {
      this.$set(this, "orderType", options.orderType);
      this.$set(this, "verifyCode", options.verifyCode);
    }
    this.getOrderInfo();
  },
};
</script>

<style scoped lang="scss">
.my-order {
  // /* #ifdef H5 */
  // margin-top: 100rpx !important;
  // /* #endif */
  // /* #ifdef MP || APP-PLUS */
  // margin-top: 100rpx !important;
  // margin-bottom: 150rpx;

  /* #endif */
  .header {
    height: 250rpx;
    padding: 0 30rpx;
  }
}

.my-order .header .picTxt {
  height: 190rpx;
}

.my-order .header .picTxt .text {
  color: rgba(255, 255, 255, 0.8);
  font-size: 26rpx;
  font-family: "Guildford Pro";
}

.my-order .header .picTxt .text .name {
  font-size: 34rpx;
  font-weight: bold;
  color: #fff;
  margin-bottom: 20rpx;
}

.my-order .header .picTxt .pictrue {
  width: 120rpx;
  height: 120rpx;
}

.my-order .header .picTxt .pictrue image {
  width: 100%;
  height: 100%;
}

.my-order .list {
  width: calc(88%) !important;
  margin: 0rpx auto 0 auto;
}

.my-order .list .item {
  background-color: #fff;
  border-radius: 14rpx;
  margin-bottom: 14rpx;
}

.nav {
  background-color: #fff;
  justify-content: space-between;
  align-items: center;
}

.nav .item {
  font-size: 26rpx;
  color: #282828;
  padding: 25rpx 0;
  display: inline-block;
  font-size: 26rpx;
}

.nav .item.on {
  /* #ifdef H5 || MP */
  font-weight: bold;
  /* #endif */
  /* #ifdef APP-PLUS */
  color: #000;
  /* #endif */
  position: relative;
  font-size: 30rpx;
}

.nav .item .num {
  margin-top: 18rpx;
}

.my-order .list {
  width: 690rpx;
  margin: 14rpx auto 0 auto;
}

.my-order .list .item {
  background-color: #fff;
  border-radius: 14rpx;
  margin-bottom: 14rpx;
}

.my-order .list .item .title {
  height: 84rpx;
  padding: 0 24rpx;
  border-bottom: 1rpx solid #eee;
  font-size: 28rpx;
  color: #282828;
}

.my-order .list .item .title .sign {
  font-size: 24rpx;
  padding: 0 13rpx;
  height: 36rpx;
  margin-right: 15rpx;
  border-radius: 18rpx;
}

.my-order .list .item .item-info {
  padding: 0 30rpx;
  margin-top: 22rpx;
}

.my-order .list .item .item-info .pictrue {
  width: 120rpx;
  height: 120rpx;
}

.my-order .list .item .item-info .pictrue image {
  width: 100%;
  height: 100%;
  border-radius: 14rpx;
  overflow: hidden;
}

.my-order .list .item .item-info {
  .nameBox {
    position: relative;
    height: 120rpx;
  }

  .sku {
    font-size: 20rpx;
    position: absolute;
    bottom: 4rpx;
    width: 420rpx;
  }

  .text {
    width: 496rpx;
    font-size: 28rpx;
    color: #999;
  }
}

.my-order .list .item .item-info .text .name {
  width: 326rpx;
  color: #282828;
}

.my-order .list .item .item-info .text .money {
  // color: #E93323;
  text-align: right;
}

.font_color {
  color: #e93323;
}

.my-order .list .item .totalPrice {
  font-size: 26rpx;
  color: #282828;
  text-align: right;
  margin: 27rpx 0 0 30rpx;
  padding: 0 30rpx 30rpx 0;
  border-bottom: 1rpx solid #eee;
}

.my-order .list .item .address {
  font-size: 26rpx;
  color: #282828;
  margin: 27rpx 0 0 30rpx;
  padding: 0 30rpx 30rpx 0;
  border-bottom: 1rpx solid #eee;
  display: flex;
  text-align: left;
  flex-direction: column;

  &_top {
    display: flex;
    align-items: center;
  }

  &_bottom {
    display: flex;
    align-items: center;
  }
}

.my-order .list .item .totalPrice .money {
  color: #e93323;
  font-size: 28rpx;
  font-weight: bold;
}

.my-order .list .item .bottom {
  height: 107rpx;
  padding: 0 30rpx;
}

.my-order .list .item .bottom .bnt {
  width: 176rpx;
  height: 60rpx;
  text-align: center;
  line-height: 60rpx;
  color: #fff;
  border-radius: 50rpx;
  font-size: 27rpx;
}

.my-order .list .item .bottom .bnt.cancelBnt {
  border: 1rpx solid #ddd;
  color: #aaa;
}

.my-order .list .item .bottom .bnt.qrCode {
  border: 1rpx solid #1296db;
  color: #fff;
  background: #1296db;
}

.my-order .list .item .bottom .bnt ~ .bnt {
  margin-left: 17rpx;
}

.noCart {
  margin-top: 171rpx;
  padding-top: 0.1rpx;
}

.noCart .pictrue {
  width: 414rpx;
  height: 336rpx;
  margin: 78rpx auto 56rpx auto;
}

.noCart .pictrue image {
  width: 100%;
  height: 100%;
}

.icon-xiangyou {
  font-size: 24rpx;
}

.default_txt {
  font-size: 26rpx;
  color: #999;
  text-align: center;
}

.searchCon {
  padding: 10rpx 0rpx;
  align-items: center;

  .search {
    flex: 1;
    height: 60rpx;
    padding: 0 32rpx;
    border-radius: 36rpx;
    background: #f5f5f5;
    margin-left: 5px;

    .iconfont {
      margin-right: 16rpx;
      font-size: 30rpx;
      color: #999999;
    }

    .inputs {
      flex: 1;
      font-size: 28rpx;
      color: #333;
    }

    .placeholder {
      font-size: 26rpx;
      color: #ccc;
    }
  }

  .btn {
    width: 72rpx;
    height: 60rpx;
    line-height: 60rpx;
    margin-left: 20rpx;
    background: #ffffff;
    text-align: center;
    font-size: 30rpx;
    color: #282828;

    .iconfont {
      font-size: 32rpx;
      line-height: 72rpx;
      color: #666666;
    }
  }
}

.canvas {
  position: fixed;
  z-index: -5;
  opacity: 0;
}

.list2 {
  width: calc(88%) !important;
  margin: 0rpx auto 0 auto;
  background-color: #fff;

  .item {
    border-radius: 14rpx;
    border-bottom: 1px solid #eee;
  }
}

.money {
  color: #e93323;
}
</style>
